import { axiosPostRequst, axiosGetRequst } from "../utils/request.js";

import { drawGraph, createContextMenu } from "./utils.js";

import businessGraph from "./getBusinessTopoData.js";

const drawComputerRoomTopo2 = async () => {
  console.log("drawComputerRoomTopo2 start");
  // 隐藏图表
  $(".layui-form").hide();
  $("#topoGrapth canvas").show();
  $("#topoGrapth .g6-tooltip").show();
  drawGraph(businessGraph);
  createContextMenu();
};

const drawComputerRoomTopo = async () => {
  // 隐藏图表
  $(".layui-form").hide();

  var graphDiv = $("#topoGrapth");
  const width = graphDiv.width();
  const height = graphDiv.height() || 500;

  // 获取拓扑关系
  var { data } = await axiosGetRequst("/m3");
  // console.log("data1111", data);

  var graph = new G6.Graph({
    container: "topoGrapth",
    width: width,
    height: height,
    modes: {
      default: [
        {
          type: "collapse-expand",
          onChange: function onChange(item, collapsed) {
            console.log("object", item, collapsed);
            var data = item.get("model").data;
            data.collapsed = collapsed;
            return true;
          },
        },
        "drag-node",
        "drag-canvas",
        "zoom-canvas",
        "click-select",
      ],
    },
    layout: {
      type: "dagre",
      nodeSize: [400, 200],
      nodesep: 20,
      ranksep: 50,
    },
    animate: true,
    defaultNode: {
      size: [200, 200],
      color: "steelblue",
      shape: "round-rect",
      style: {
        lineWidth: 2,
        fill: "#fff",
      },
    },
    defaultEdge: {
      size: 1,
      color: "#fff",
      style: {
        endArrow: {
          path: "M 4,0 L -4,-4 L -4,4 Z",
          d: 4,
        },
      },
    },
  });

  graph.data(data);
  graph.render();
};

const drawBusinessTable = async () => {
  console.log("drawBusinessTable");
  let graphDiv = $("#topoGrapth");
  $(".layui-form").show();
  $("#topoGrapth canvas").hide();
  $("#topoGrapth .g6-minimap").hide();

  var data = [
    {
      id: 10000,
      username: "user-0",
      sex: "女",
      city: "城市-0",
    },
    {
      id: 10001,
      username: "user-1",
      sex: "男",
      city: "城市-1",
    },
    {
      id: 10002,
      username: "user-2",
      sex: "女",
      city: "城市-2",
    },
    {
      id: 10003,
      username: "user-3",
      sex: "女",
      city: "城市-3",
    },
    {
      id: 10006,
      username: "user-6",
      sex: "女",
      city: "城市-6",
    },
    {
      id: 10007,
      username: "user-7",
      sex: "男",
      city: "城市-7",
    },
    {
      id: 10008,
      username: "user-8",
      sex: "男",
      city: "城市-8",
    },
    {
      id: 10009,
      username: "user-9",
      sex: "女",
      city: "城市-9",
    },
    {
      id: 10010,
      username: "user-10",
      sex: "女",
      city: "城市-10",
    },
    {
      id: 10011,
      username: "user-11",
      sex: "女",
      city: "城市-11",
    },
    {
      id: 10012,
      username: "user-12",
      sex: "女",
      city: "城市-12",
    },
    {
      id: 10013,
      username: "user-13",
      sex: "女",
    },
    {
      id: 10014,
      username: "user-14",
      sex: "女",
    },
    {
      id: 10015,
      username: "user-15",
      sex: "女",
    },
    {
      id: 10016,
      username: "user-1",
      sex: "女",
    },
  ];

  // var { data } = await axiosGetRequst("/m2");
  // console.log("data", data);
  layui.use(function () {
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    var theight = graphDiv.height();
    // 创建表格实例
    table.render({
      elem: "#ID-table-demo-search",
      data: data,
      // 此处为静态模拟数据，实际使用时需换成真实接口 data url 二选一
      // url: "https://layui.dev/static/json/2/table/user.json?page=1&limit=10", // 此处为静态模拟数据，实际使用时需换成真实接口
      cols: [
        [
          { field: "id", title: "ID", sort: true, fixed: true },
          { field: "username", title: "用户名" },
          { field: "sex", title: "性别" },
        ],
      ],
      size: "sm",
      page: {
        layout: ["limit", "count", "prev", "page", "next", "skip"], //自定义分页布局
        groups: 1, //只显示 1 个连续页码
        first: false, //不显示首页
        last: false, //不显示尾页
      },
      height: theight > 400 ? theight - 40 : theight,
    });
    // 日期
    laydate.render({
      elem: ".demo-table-search-date",
    });
    // 搜索提交
    form.on("submit(demo-table-search)", function (data) {
      console.log("data", data);
      var field = data.field; // 获得表单字段
      // 执行搜索重载
      table.reload("ID-table-demo-search", {
        page: {
          curr: 1, // 重新从第 1 页开始
        },
        where: field, // 搜索的字段
      });
      layer.msg("搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可");
      return false; // 阻止默认 form 跳转
    });

    // 输入框点缀事件 - 搜索示例
    form.on("input-affix(search)", function (d) {
      var elem = d.elem; // 输入框
      var value = elem.value; // 输入框的值
      var newData = !value
        ? data
        : data.filter((obj) => obj.username.indexOf(value) !== -1);

      table.reload("ID-table-demo-search", {
        page: {
          curr: 1, // 重新从第 1 页开始
        },
        data: newData,
      });
    });
  });
};

const drawBusinessTopo = async () => {
  var graphDiv = document.getElementById("topoGrapth");
  // var { data } = await axiosGetRequst("/m2");
  // console.log("data", data);
  console.log("data");
  return;
  // 获取拓扑关系
  var { data } = await axiosGetRequst("/m2");

  var graphDiv = document.getElementById("topoGrapth");

  const width = graphDiv.scrollWidth;
  const height = graphDiv.scrollHeight || 500;

  var graph = new G6.Graph({
    container: "topoGrapth",
    width: width,
    height: height,
    modes: {
      default: [
        {
          type: "collapse-expand",
          onChange: function onChange(item, collapsed) {
            var data = item.get("model").data;
            data.collapsed = collapsed;
            return true;
          },
        },
        "drag-canvas",
        "zoom-canvas",
      ],
    },
    layout: {
      type: "dagre",
      nodeSize: [400, 200],
      nodesep: 20,
      ranksep: 50,
    },
    animate: true,
    defaultNode: {
      size: [200, 200],
      color: "steelblue",
      shape: "round-rect",
      style: {
        lineWidth: 2,
        fill: "#fff",
      },
    },
    defaultEdge: {
      size: 1,
      color: "#fff",
      style: {
        endArrow: {
          path: "M 4,0 L -4,-4 L -4,4 Z",
          d: 4,
        },
      },
    },
  });
  graph.data(data);
  graph.render();
};

export {
  drawComputerRoomTopo,
  drawBusinessTable,
  drawBusinessTopo,
  drawComputerRoomTopo2,
};
